<script setup>
import {ref,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import axios from '@/http/index'
import dayjs from 'dayjs'
let route=useRoute()
let router=useRouter()
let id=ref(route.query.id)
const checked = ref(true);
const onClickLeft = () => history.back();
let yd=ref([])
let peopleNum=ref(1)
let phone=ref('')
let name=ref('')
let year=ref(new Date().getFullYear())
let month=ref(new Date().getMonth()+1)
let date=ref(new Date().getDate())
let day=ref(new Date().getDay())
let day1=ref(new Date().getDay()+1)
let sdate=ref(year.value+'-'+month.value+'-'+date.value)
let edate=ref(year.value+'-'+month.value+'-'+Number(date.value+1))
const dialogTableVisible = ref(false)
let days=ref(1)
const sday1=((e)=>{
    day.value=new Date(e.target.value).getDay()
})
const sday2=((e)=>{
    day1.value=new Date(e.target.value).getDay()
    if(sdate.value!=''){
        let time=new Date(edate.value)-new Date(sdate.value)
        days.value=time/1000/60/60/24
    }

})
onMounted(()=>{
    axios.get(`/my/housexq?id=${id.value}`).then(
        res=>{
            if(res.data.code==200){
                yd.value=res.data.data
            }
        }
    ) 
})
</script>
<template>
    <div>
        <van-sticky>
            <van-nav-bar title="确认订单" left-arrow @click-left="onClickLeft"/>
        </van-sticky>
        <div v-for="item in yd" :key="item._id">
            <div style="margin-left:20px;display:flex;">
                <img style="width:120px;height:120px;" :src="item.img[0]"/>
                <div style="padding:10px 10px;margin-right:15px;border:1px solid #ddd;width:67%;box-shadow:5px 5px 5px #ddd;">
                    <p>{{item.name}}</p>
                    <div style="display: flex;margin-top:10px;">
                        <p>{{item.cate}}</p>
                        <p style="font-size:20px;font-weight:bolder;margin-left:5px;margin-top:-8px;">.</p>
                        <p>{{item.roomNum}}居{{item.badNum}}床{{item.visitorNum}}人</p>
                        <p style="font-size:20px;font-weight:bolder;margin-left:5px;margin-top:-8px;">.</p>
                        <p>{{item.home_km}}</p>
                    </div>
                    <p style="font-weight:bolder;color:orange;margin-top:10px;">￥{{item.price}}</p>
                </div>
            </div>
            <div style="position:relative;margin-top:20px;padding:10px;border:1px solid #ddd;margin-right:15px;box-shadow:5px 5px 5px #ddd;margin-left:20px;">
                <h3 style="font-weight:bolder;">入离日期</h3>
                <p style="position: absolute;top:0;right:20px;" @click="dialogTableVisible = true">修改日期&nbsp;&nbsp;<span style="font-size:30px;vertical-align:middle;">&gt;</span></p>
                <div style="display: flex;background-color:rgb(193,219,216);padding:20px;margin-top:10px;">
                    <div style="text-align:center;font-size:10px;">
                        <p style="font-weight:bolder;">{{sdate}}</p>
                        <p>星期{{day}}&nbsp;&nbsp;{{dayjs(item.check).format('HH:mm')}}后入住</p>
                    </div>
                    <div style="margin-left:20px;background-color:rgb(204,204,204);padding:10px;">共{{days}}晚</div>
                    <div style="text-align:center;font-size:9px;margin-left:20px;">
                        <p style="font-weight:bolder;">{{edate}}</p>
                        <p>星期{{day1}}&nbsp;&nbsp;{{dayjs(item.leave).format('HH:mm')}}前入住离开</p>
                    </div>
                </div>
                <el-dialog v-model="dialogTableVisible" width="100%">
                    <input type="date" style="width:150px;text-align:center;" v-model="sdate" @change="(e)=>{
                        sday1(e)
                    }"/>
                    <span style="margin-left:10px;margin-right:10px;">---</span>
                    <input type="date" style="width:150px;text-align:center;" v-model="edate" @change="(e)=>{
                        sday2(e)
                    }"/>
                </el-dialog>
                <div style="display: flex;margin-top:10px;position:relative;padding-bottom:10px;border-bottom:2px solid #ddd;">
                    <p style="margin-left:15px;">入住人数({{peopleNum}}/{{item.visitorNum}})</p>
                    <p style="position: absolute;right:15px;">
                        <button :disabled="peopleNum==1?true:false" @click="peopleNum--;">-</button>
                        <span>&nbsp;&nbsp;{{peopleNum}}人&nbsp;&nbsp;</span>
                        <button :disabled="peopleNum==item.visitorNum?true:false" @click="peopleNum++;">+</button>
                    </p>
                </div>
                <p style="border-bottom:2px solid #ddd;margin-top:10px;">
                    <van-form>
                        <van-field
                        v-model="name"
                        name="住客姓名"
                        label="住客姓名"
                        placeholder="请输入住客姓名"
                        :rules="[
                            { message: '请填写住客姓名',required:true }]"
                    />
                    </van-form>
                </p>
                <p style="border-bottom:2px solid #ddd;margin-top:10px;">
                    <van-form>
                        <van-field
                            v-model="phone"
                            name="联系方式"
                            label="联系方式"
                            placeholder="请输入联系方式"
                            :rules="[
                                { pattern:/^1[3-9]\d{9}$/, message: '请输入正确的联系方式' },
                                {required:true,message:'请填写联系方式'}
                            ]"
                        />
                    </van-form>
                </p>
            </div>
            <div style="position:relative;margin-top:20px;padding:10px;border:1px solid #ddd;margin-right:15px;box-shadow:5px 5px 5px #ddd;margin-left:20px;">
                <div style="display: flex;padding-bottom:10px;border-bottom:1px solid #ddd;">
                    <p style="color:gray;">免费赠送住宿费意外险</p>
                    <p style="position:absolute;right:20px;">
                        <van-switch v-model="checked" />
                    </p>
                </div>
                <h3 style="margin-top:10px;font-weight:bolder;">发票</h3>
                <p style="color:gray;">发票请联系房东（有疑问咨询客服）</p>
            </div>
            <div style="width:89.5%;margin:40px auto;margin-left:30px;">
                <p style="font-size:11px;color:gray;">
                    退订规则<br>
                    取消订单。扣除全部房费作为违约金支付给房东，如提前离店，扣除<br>
                    全部剩余房费作为违约金支付给房东<br>
                </p>
                <p style="margin-top:20px;font-size:11px;color:gray;">
                    入住提示<br>
                    房东确认后方可线上向房东索要入住须知，方便您安排入住；系统提供<br>
                    24小时客服服务，确保您入住无忧
                </p>
                <p style="margin-top:20px;font-size:11px;color:gray;">
                    押金提示<br>
                    在线支付押金200元，到店后无需支付，住房押金离店后，如无需扣款，<br>
                    将原方式退还
                </p>
                <div style="display: flex;position:relative;">
                    <div>
                        <h2 style="margin-top:20px;font-weight:bolder;color:orange;">￥{{Number(item.price)+200}}.00</h2>
                        <p style="color:gray;font-size:14px;">含押金￥200.00（可退）</p>
                    </div>
                    <div style="position:absolute;right:20px;bottom:10px;">
                        <van-button type="primary" @click="router.push({path:'/home/pay',query:{id:id,sdate:sdate,edate:edate,peopleNum:peopleNum,days:days,name:name,fname:item.name,phone:phone,price:Number(item.price)+200}})">提交订单</van-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>

</style>